<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Vue 3 v-for </title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f4f4f4;
    }
  </style>
</head>
<body>
<div id="app">
  <table border="1">
    <th>id</th><th>书名</th>
    <tr v-for="book in books" :key="book.id">
      <td>{{ book.id }}</td><td>{{ book.title }}</td>
    </tr>
  </table>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        books: [
          {id: 1, title: 'Vue.js 3 权威指南'},
          {id: 2, title: 'JavaScript 高级程序设计'},
          {id: 3, title: '深入浅出 Vue.js'}
        ]
      };
    }
  });
  app.mount('#app');
</script>
</body>
</html>
